<template>
  <div class="systemSettingBox"
       v-loading="loading">
    <div class="search-select">
      <slot name="search-select">
        <el-select size="mini"
                   class="select-type"
                   v-model="typeId"
                   placeholder="请选择文章类型">
          <el-option v-for="item in typeList"
                     :key="item.id"
                     :label="item.type"
                     :value="item.id">
          </el-option>
        </el-select>
      </slot>
    </div>
    <el-table v-loading="loading"
              class="showTable"
              :data="showProduceList"
              style="width: 90%">
      <el-table-column v-for="item in tableList"
                       :prop="item.key"
                       align="center"
                       :key="item.key"
                       :label="item.name">
      </el-table-column>
      <el-table-column ref="edit"
                       width="250"
                       label="封面图"
                       align="center">
        <template slot-scope="scope">
          <div class="block">
            <el-image style="width: 120px; height: 80px"
                      :src="scope.row.headPhoto">
              <div slot="error"
                   class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column ref="edit"
                       width="70"
                       label="检阅🔍"
                       align="center">
        <template slot-scope="scope">
          <router-link :to="{
              path: '/manage/media_essay',
              query: { newId: scope.row.id },
            }"
                       class="check-link">查看</router-link>
        </template>
      </el-table-column>
      <el-table-column ref="edit"
                       width="80"
                       label="选中轮播"
                       align="center">
        <template slot-scope="scope">
          <div @click="addImage(scope.row.headPhoto, scope.row.id)"
               class="check-link">
            <el-button type="primary"
                       icon="el-icon-check"
                       circle></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-size="size"
                     layout="total, prev, pager, next, jumper"
                     :total="totalSize">
      </el-pagination>
    </div>
    <h3>图片列表</h3>
    <div class="pictures">
      <div class="aPicture"
           v-for="item in images"
           :key="item.articleId">
        <el-image style="width: 100px; height: 100px"
                  :src="item.url"
                  :preview-src-list="imageSrc">
        </el-image>
        <span class="el-icon-circle-close"
              @click="deleteImage(item.url)"></span>
      </div>
    </div>
    <h3 style="margin: 20px 0">效果预览</h3>
    <div class="review">
      <slideImage :isShow="true"
                  :images="images" />
    </div>
  </div>
</template>


<script>
import slideImage from "../../components/home/slidingImage.vue";
export default {
  components: {
    slideImage,
  },
  data () {
    return {
      loading: false, //加载中？
      images: [], //已有轮播图
      imageSrc: [], //大图片--路径纯享版
      showProduceList: [],
      passage_loading: false,
      totalSize: 0,
      size: 6,
      type: 1,
      page: 1,
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      typeList: [], // 搜索
      typeId: "",
      tableList: [
        { name: "作者", key: "authorName" },
        { name: "审核人员", key: "reviewerName" },
        { name: "文章标题", key: "title" },
        { name: "发布日期", key: "releaseDate" },
      ],
    };
  },
  watch: {
    typeId () {
      this.getEssay(1);
    },
  },
  methods: {
    handleCurrentChange (page) {
      this.$data.page = page;
      this.getEssay(page);
    },
    // 获取已有轮播图图片
    getImages: async function () {
      this.loading = true;
      const result = await this.$request.post({
        url: "/articlePhotoManagement/query",
      });

      this.images = result;
      this.imageSrc = [];
      for (let i = 0; i < result.length; i++) {
        this.imageSrc.push(result[i].url);
      }
      this.loading = false;
    },
    async getEssay (page) {
      const { size, typeId } = this.$data;
      this.$data.passage_loading = true;
      try {
        const resultList = await this.$request.postForm({
          url: `/article/list/1`,
          data: {
            type: typeId,
            page: page,
            size: size,
          },
        });

        this.$data.showProduceList = resultList.list;
        this.$data.totalSize = resultList.totalCount;
        this.$data.passage_loading = false;
      } catch (error) {
        this.$data.passage_loading = false;
      }
    },
    // 获取文章类型
    async getListType () {
      const resultList = await this.$request.get({
        url: "/article/all/type",
      });
      this.$data.typeList = resultList;
      this.$data.typeId = resultList[0].id;
    },
    // 添加轮播图图片
    async addImage (url, articleId) {
      this.$confirm("是否添加该文章及其对应图片在首页轮播图的展示", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const addSlidingImage = await this.$request.post({
          url: "/articlePhotoManagement/insert",
          data: {
            url,
            articleId,
          },
        });
        this.getImages();
        this.$message({
          type: "success",
          message: `添加成功!`,
        });
      });
    },
    // 删除轮播图图片
    async deleteImage (url) {
      this.$confirm("是否删除该图片及其对应文章在首页轮播图的展示", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const result = await this.$request.post({
          url: `/articlePhotoManagement/delete?url=${url}`,
        });
        this.getImages();
        this.$message({
          type: "success",
          message: `删除成功!`,
        });
      });
    },
  },
  computed: {},
  async mounted () {
    this.getImages();
    await this.getListType();
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.systemSettingBox {
  overflow: hidden;
  padding: 30px;
  min-width: 1000px;
  overflow: scroll;
  .pagination {
    margin: 30px 0 0 0;
    transform: translate(35%);
  }
  .review {
    width: 100%;
    height: 500px;
  }
  .pictures {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    // width: 20%;
    // height: 300px;
    .aPicture {
      position: relative;
      margin: 0 25px 0 25px;
      width: 150px;
      height: 100px;
      overflow: hidden;
    }
    .el-icon-circle-close {
      position: absolute;
      right: 30px;
      color: rgb(255, 0, 0);
    }
  }
}
</style>